<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        #content{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 40px;
        }
        .el-icon-circle-plus{
            font-size: 3em;
            display: block;
            text-align: center;
            z-index: auto;
            position: relative;
            line-height: 0;
        }
        .excerpt header {
            width: 500px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <div class="content-wrap">
            <div class="content">
                <div class="title">
                    <h3>我的收藏({{collects.length}})</h3>
                </div>
                <h1 v-if="isHave==false" style="text-align: center">暂无收藏记录!</h1>
                <article class="excerpt excerpt-1" style="height: 180px;" v-for="h in collects" >
                    <a @click="goHouseDetails(h.id)" class="focus" title="">
                        <img class="thumb" :src="h.image" alt="">
                    </a>
                    <header><a class="cat" href="program">{{h.type}}<i></i></a>
                        <h2><a @click="goHouseDetails(h.id)" title="" style="font-weight: 400; font-size: 20px">{{h.introduce}}</a></h2>
                    </header>
                    <div style="display: flex;">
                        <p class="meta">
                            <span class="time"> {{h.scale}}</span>
                            <span class="views"> {{h.area}}m²</span><br><br>
                            <span class="views"> {{h.address}}</span><br><br>
                            <span class="views"> 来自经纪人</span>
                        </p>
                        <p class="meta" style="margin: auto;font-size: 28px;color: red;font-weight: 400;float: right;">
                            <span style="margin-left: 200px;"> {{h.price}}元/月</span>
                        </p>
                    </div>
                </article>
            </div>
        </div>
        <aside class="sidebar">
            <div class="widget widget_hot">
                <h3>收藏夹({{total}})<a style="font-size: 12px; float: right" @click="manage">批量管理</a></h3>
                <ul>
                    <li v-for="map in list" style="height: 150px;">
                        <div style="padding: 10px 0px 0px 20px; display: flex">
                            <div style="width: 300px; cursor: pointer" @click="goFolderHtml(map.folderId, map.folderName)">
                                <span class="text">{{map.folderName}}</span>
                                <span class="muted">{{map.collectsMap.total}}个作品</span>
                                <span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span>
                            </div>
                            <div v-if="isManage" style="width: 30px;">
                                <span v-if="folderIds.includes(map.folderId)" @click="tSelect(map.folderId)" class="el-icon-circle-check" style="font-size: 2em;  cursor: pointer"></span>
                                <span v-else @click="fSelect(map.folderId)" class="el-icon-circle-plus-outline" style="font-size: 2em;  cursor: pointer"></span>
                            </div>
                        </div>
                        <div style="padding: 0px 15px 10px 139px; cursor: pointer" @click="goFolderHtml(map.folderId, map.folderName)">
                            <span class="thumbnail">
                                <img v-for="(m,index) in map.collectsMap.collects" v-if="index < 3" class="thumb" :src="m.image" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 1" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 2" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 3" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                            </span>
                        </div>
                    </li>
                </ul>
                <div v-if="isManage" style="text-align: center; padding-bottom: 10px;">
                    <el-button @click="backManage">取消</el-button>
                    <el-button v-if="folderIds.length == total" @click="folderIds = []">取消全选</el-button>
                    <el-button v-else @click="allSelect()">一键全选</el-button>
                    <el-button @click="deleteFolder()">删除</el-button>
                </div>
            </div>
            <a style="color: black" @click="addFolderWinVisiable = true"><div class="el-icon-circle-plus"></div></a>
            <nav class="pagination">
                <div class="block">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="current"
                            :page-size.sync="size"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </nav>

            <el-dialog title="添加收藏夹" :visible.sync="addFolderWinVisiable">
                <el-form>
                    <el-form-item label="收藏夹名称" label-width="100px">
                        <el-input v-model="folderName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="back">取 消</el-button>
                    <el-button type="primary" @click="addFolder">确 定</el-button>
                </div>
            </el-dialog>
        </aside>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            collects: {},
            user: {},
            isHave: false,
            list: {},
            folderName: "",
            addFolderWinVisiable: false,
            current: 1,
            size: 3,
            total: 0,
            isManage: false,
            folderIds: [],
            allFolderId: [],
            userId: "",
        },
        created(){
            this.onlogin();
            this.$forceUpdate();
        },
        methods:{
            onlogin(user){
                console.log(user);
                this.user = user;
                setTimeout(()=>{
                    this.query();
                    this.selectFolder();
                },500)
            },
            query(){
              axios.post("collect/selectCollects?userId=" + this.user.id).then(res=>{
                  console.log(res.data)
                  this.collects = res.data;
                  if (this.collects.length != 0){
                      this.isHave = true;
                  }
              })
            },
            selectFolder(){
                let params = new URLSearchParams();
                params.append("current",this.current);
                params.append("userId",this.user.id);
                axios.post("folder/selectFolder", params).then(res=>{
                    console.log(res.data)
                    this.list = res.data.list;
                    this.total = res.data.total;
                    this.allFolderId = res.data.folderIds;
                })
            },
            deleteFolder(){
                axios.post("folder/deleteFolder?folderIds=" + this.folderIds).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.folderIds = [];
                        this.selectFolder();
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            backManage(){
                this.isManage = false;
                this.folderIds = [];
            },
            manage(){
                this.isManage = true;
            },
            fSelect(folderId){
                this.folderIds.push(folderId);
            },
            tSelect(folderId){
                for (let i = 0; i < this.folderIds.length; i++){
                    if (this.folderIds[i] == folderId){
                        this.folderIds.splice(i, 1);
                    }
                }
            },
            allSelect(){
                this.folderIds = [];
                this.folderIds = this.allFolderId;
            },
            back(){
                this.folderName = "";
                this.addFolderWinVisiable = false;
            },
            addFolder(){
                let params = new URLSearchParams();
                params.append("folderName",this.folderName);
                params.append("userId",this.user.id);
                axios.post("folder/addFolder?", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.addFolderWinVisiable = false;
                        this.folderName = "";
                        this.selectFolder();
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            goFolderHtml(folderId, folderName){
                console.log(folderId);
                localStorage.setItem("folderId",folderId);
                localStorage.setItem("folderName",folderName);
                location.href = "folder.html";
            },
            goHouseDetails(id){
                localStorage.setItem("houseId",id);
                location.href = "houseDetails.html";
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                //this.$forceUpdate();
                console.log(`当前页: ${val}`);
                this.selectFolder();
            },
        },
        computed:{
            isSelect(){
                return true;
            }
        }
    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>